<template>
    <div class="table_total">
      <div class="table-wrapper">
        <table class="custom-table">
          <thead>
            <tr>
              <th>#</th>
              <th>规范文件列表</th>
            </tr>
          </thead>
          <tbody>
            <tr
              v-for="row in tableData"
              :key="row.id"
              @click="handleRowClick(row)"
              :class="{
                'table-row-selected': row.id === currentRowId,
                'table-row': row.id !== currentRowId,
              }"
            >
              <td>{{ row.id }}</td>
              <td>{{ row.title }}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    name: "TableComponent",
    data() {
      return {
        currentRowId: null, // 保存当前点击的行ID
      };
    },
    props: {
      selectedRow: {
        type: Number,
        default: null,
      },
      tableData: {
        type: Array,
        required: true,
      },
    },
    created() {
      // 初始化时将 currentRowId 设置为 selectedRow
      this.currentRowId = this.selectedRow;
    },
    watch: {
      // 监听 selectedRow 的变化以更新 currentRowId
      selectedRow(newVal) {
        this.currentRowId = newVal;
      },
    },
    methods: {
      handleRowClick(row) {
        // 更新当前点击的行 ID
        console.log("点击了行：", row);
        this.currentRowId = row.id;
  
        // 触发事件并传递点击的行的 ID
        this.$emit('row-click', row);
      },
    },
  };
  </script>
  
  <style scoped>
  .table_total {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
  }
  
  .table-wrapper {
    width: 100%;
    height: 99%;
    background-color: transparent !important;
    overflow: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  
  .table-wrapper::-webkit-scrollbar {
    display: none;
  }
  
  .custom-table {
    width: 100%;
    border-spacing: 0;
    border-collapse: collapse;
    background-color: transparent;
    border-spacing: 0 3px;
    color: rgba(170, 178, 185, 1);
    font-family: AlibabaPuHuiTi_2_65_Medium;
    font-size: 2vh;
  }
  
  .custom-table td {
    padding: 0.3vh;
    font-family: AlibabaPuHuiTi_2_55_Regular;
    text-align: left;
    border: 0.1px solid transparent;
    background-color: transparent;
  }
  
  .custom-table td:nth-child(1) {
    text-align: right;
  }
  
  .table-row {
    z-index: 1;
    width: 100%;
    transition: background-color 0.3s ease;
    background-image: url("../assets/img/module4/part1/table3.png");
    background-size: cover;
    font-family: AlibabaPuHuiTi_2_55_Regular;
  }
  
  .table-row-selected {
    z-index: 1;
    background-image: url("../assets/img/module4/part1/table_select.png");
    transition: background-color 0.3s ease;
    background-size: cover;
    font-family: AlibabaPuHuiTi_2_55_Regular;
  }
  
  .custom-table thead {
    position: sticky;
    background-size: 100% 100%;
    background-color: transparent;
    text-align: left;
    top: 0;
    background-image: url("../assets/img/module4/part1/SketchPng94d57dca8bf834cfc73d945c5af729aa3d1ed9845aa60dd37514e4066014c1ae.png");
    background-size: cover;
    background-position: center;
    color: white;
    z-index: 2;
    backdrop-filter: blur(5px);
  }
  </style>
  